<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航页</title>
    <style>
        ul {
            list-style: none;
            padding: 0;
            margin: 0;
            margin-bottom: 20px;
        }

        ul>li {
            display: inline-block;
            border: 2px solid;
            transition: .5s;
        }

        ul>li:hover {
            background-color: #000;
            border: 2px solid;
            transform: translateY(4px);
            cursor: pointer;
        }

        ul>li>a {
            display: block;
            padding: 4px 8px;
            color: #000;
            text-decoration: none;
        }

        ul>li:hover>a {
            color: #fff;
        }
    </style>
</head>

<body>
    <p><a href=https://gitee.com/GuoSTZ/grocery.git>gitee仓库</a></p>
    <ul>
        <li><a>a标签实现文件下载</a></li>
        <li><a>async测试</a></li>
        <li><a>axios请求后端接口</a></li>
        <li><a>按钮-鼠标滑过特效</a></li>
        <li><a>圆形进度条</a></li>
        <li><a>故障文字</a></li>
        <li><a>发光圆形</a></li>
        <li><a href=./pages/pageState/index.html>监控页面状态</a></li>
        <li><a>3D进度条</a></li>
        <li><a>返回顶部</a></li>
        <li><a>星空效果</a></li>
    </ul>
    <div>
        <iframe id=content src="" frameborder="0" width="100%" height="800px"></iframe>
    </div>
    <script>
        // 这是每个li对应的url，一定要保持两者顺序相同
        const urls = [
            './pages/a-link/a-link-download.html',
            './pages/async-await/async-await.html',
            './pages/axios-test/axios-test.html',
            './pages/buttonHover/index.html',
            './pages/circleProgress/index.html',
            './pages/glitch/index.html',
            './pages/lightCircle/index.html',
            '',
            './pages/progress/index.html',
            './pages/returnTop/index.html',
            './pages/star/index.html',
        ]
        const cont = document.getElementById("content")
        const ul = document.querySelector("ul");
        ul.onclick = function (e) {
            e = e || window.event; //这一行及下一行是为兼容IE8及以下版本
            const target = e.target || e.srcElement;
            if (target.tagName.toLowerCase() === "a") {
                const a = this.querySelectorAll("a");
                index = Array.prototype.indexOf.call(a, target);
                cont.src = urls[index]
                document.title = target.innerHTML
            }
        }
    </script>

</body>

</html>